<script setup>
import {onMounted, reactive, ref} from 'vue';
import {useRouter} from "vue-router";
import {ElMessage} from 'element-plus'

import axios from 'axios';


document.title = "资讯列表";

let page = ref(1);
let pageSize = ref(6);
let total = ref(6)
let EditDialogVisible = ref(false);
const api = "http://1.116.198.235/article/api/zxnews.php?type=";
const articleData = ref([])
const router = useRouter();

const init = (pageSize, pageindex) => {
  axios({
    method: "get",
    url: api + `news&pagesize=${pageSize}&pageindex=${pageindex}`,
    headers: {
      'Content-Type': 'application/json',
      'Authorization': localStorage.getItem('userLoginToken'),
    },
  }).then(result => {
    console.log(result)
    if (result.data.code === "ok") {
      articleData.value = result.data.result.rows
      console.log(result.data.result.total)
      total.value = parseInt(result.data.result.total)
    } else if (result.data.code === "error1" && !(localStorage.getItem('userLoginToken') === null)) {
      ElMessage.error("提示：暂无数据！")
    } else {
      alert("提示：无法操作系统，请先登录！");
      router.push("/")
    }
  })
}
init(6, 1)


function DelList(id) {
  if (window.confirm('提示：确定要删除吗？')) {
    axios({
      url: api + 'del&aid=' + id,
      headers: {
        'Content-Type': 'application/json',
        'Authorization': localStorage.getItem('userLoginToken'),
      },
    }).then(result => {
      if (result.data.code === 'ok') {
        init(6, 1)
        ElMessage.success(result.data.msg)
        window.confirm('提示：确定要删除吗？')
        init(6, 1)
      } else {
        ElMessage.warning(result.data.msg)
      }
    })
  }
}

const outSystem = () => {
  if (window.confirm("提示：确定要退出资讯列表吗？")) {
    axios({
      method: "get",
      url: api + "out",
      headers: {
        'Content-Type': 'application/json',
        'Authorization': localStorage.getItem('userLoginToken'),
      },
    }).then(result => {
      console.log(result)
      if (result.data.code === 'ok') {
        localStorage.clear();
        router.push("/");
      }
    })

  }
};

const handleSizeChange = (sizeChange) => {
  init(pageSize.value, page.value)
}
const handlerCurrentChange = (currentPage) => {
  init(pageSize.value, currentPage)
}

const toArticleInfo = (aid) => {
  router.push({
    query: {
      aid
    },
    path: '/showItem'
  })
};
const toEditArticle = (aid) => {
  router.push({
    query: {aid},
    path: '/updateItem',
  })
}

</script>

<template>
  <div class="bigbox">
    <div class="box">
      <div class="top">
        <br>
        <p>资讯列表</p>
        <el-button type="primary" plain>
          <router-link to="/addItem">
            添加咨讯
          </router-link>
        </el-button>
        <el-button type="success" plain @click="outSystem">退出系统</el-button>
      </div>
      <div class="news">
        <ul v-for="(item,index) in articleData" :key="item.id">
          <li id="num">{{ index + 1 }}</li>
          <li id="title" @click="toArticleInfo(item.id)">
            <!--            <router-link to="/informationBrowsing" href="">-->
            <span>
                                {{ item.title }}
                            </span>
            <!--            </router-link>-->
          </li>
          <li>
                        <span id="time">
                            {{ item.date }}
                        </span>
          </li>
          <li>
            <router-link class="edit" to="/updateItem">
              <button type="button" class="btn btn-success" @click.prevent="toEditArticle(item.id)">编辑</button>
            </router-link>
          </li>
          <li>
            <a class="del">
              <button type="button" class="btn btn-danger" @click="DelList(item.id)">删除</button>
            </a>
          </li>
        </ul>
      </div>
      <div class="page">
        <div class="page">
          <div class="pagination" style="width: 100%; display: flex; justify-content: center;">
            <el-pagination
                background
                :total="total"
                layout="sizes, prev, pager, next"
                class="mt-4"
                v-model:current-page="page"
                v-model:page-size="pageSize"
                :page-sizes="[1, 3, 6, 9]"
                @size-change="handleSizeChange"
                @current-change="handlerCurrentChange"/>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped>
.bigbox {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(to bottom, #a9e3a1, rgb(255, 255, 255));
}

.box {
  width: 1200px;
  height: 800px;
  margin: 0 auto;
  position: relative;
}

.top {
  width: 1200px;
  position: relative;
  border-bottom: 2px solid #154604;
}

.top > p {
  line-height: 50px;
  text-align: center;
  color: #9fe384;
  font-size: 26px;
  letter-spacing: 7px;
  text-shadow: 0 -1px 20px white;
  font-family: "华文琥珀";
}

.edit {
  margin: 0 5px;
}

.top > ul {
  position: absolute;
  right: 0;
  top: 0;
  transition: all 1s;
  z-index: 999;
}

.top > ul > li {
  height: 30px;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.top > ul > li > img {
  float: right;
  transition: all 1s;
}

.top > ul:hover {
  width: 85px;
  height: 100px;
  background-color: #dedede;
}

.nav > li:hover img {
  width: 30px;
  transform: translateX(-25px) rotate(-180deg);
}

#title:hover {
  cursor: pointer;
}

.nav-in {
  display: none;
}

.nav-in > li {
  width: 85px;
  height: 30px;
  margin-top: 5px;
  list-style: none;
  color: gray;
}

.nav-in a {
  color: gray;
  text-decoration: none;
}

.nav > li:hover .nav-in {
  display: block;
}

.nav-in > li:hover {
  background-color: rgb(197, 197, 197);
}

.news {
  width: 1000px;
  margin: 10px auto;
  display: flex;
  flex-direction: column
}

.news > ul {
  width: 1000px;
  height: 30px;
  /* border: 1px solid blue; */
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  z-index: 999;
}

#num {
  font-size: 16px;
  width: 20px;
}

.news > ul > #title {
  width: 50%;

}

#time {
  display: inline-block;
  width: 160px;
}

.news > ul > li > button {
  width: 40px;
  height: 25px;
  border-radius: 10px;
  border: 0;
}

.box > img {
  position: absolute;
  bottom: 0;
}

#pic1 {
  right: -18px;
  top: 50px;
}
</style>